<template>
  <div class="goods">
    <!-- 标签页 -->
    <el-tabs tab-position="right" style="height:700px" v-model="collectionName">
      <el-tab-pane label="关注" name="follow">
        <el-table :data="follow" style="width:100%" @row-click="getDetail">
          <el-table-column label="标题" prop="title" ></el-table-column>
          <el-table-column label="作者" prop="detail.auth" width="280"></el-table-column>
          <el-table-column label="发布时间" prop="time" width="280"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="栏目" name="column">
        <el-table :data="column" style="width:100%" @row-click="getDetail">
          <el-table-column label="标题" prop="title" ></el-table-column>
          <el-table-column label="作者" prop="detail.auth" width="280"></el-table-column>
          <el-table-column label="发布时间" prop="time" width="280"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </div> 
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  head(){
    return {
      meta:[
        {name:'keywords',content:this.collectionName}
      ]
    }
  },
  asyncData({app:{$axios}}){
    return Promise.all([
      $axios({url:'/api/goods/follow'}),
      $axios({url:'/api/goods/column'}),
    ]).then(
      ([follow,column])=>({follow:follow.data.data,column:column.data.data})
    )
  },
})
export default class Goods extends Vue {

  collectionName:string = 'column'

  getDetail(row:{_id:string},col:object,ev:Event){
    this.$router.push({name:'goods-id',params:{id:row._id},query:{collectionName:this.collectionName}})
  }
}

</script>

